<template>
	<el-card class="page">
		<header>
			<el-button type="primary" @click="addpsf()">新建模板</el-button>
		</header>
		<div v-loading="tableLoading" class="contain">
			<div 
			     style="margin: 8px 0;"
			     v-for="item in tableData"
				 :key="item.template_id"
				 >
				 <div class="info">
					 <div style="width: 15%;">
						{{ item.template_name }}
					 </div>
					 <div style="width: 15%;">
						状态: {{ statusOption[item.status - 1] }}
					 </div>
					 <div style="width: 25%;">
					 	创建: {{ item.create_time }}
					 </div>
					 <div style="width: 25%;">
					 	编辑: {{ item.update_time }}
					 </div>
					 <div style="width: 20%;">
					 	<el-button type="text" @click="()=>{ 
							item.status === 1?item.status=2:item.status=1;
							setTemplateStatus(item.template_id,item.status === 1?2:1) 
							}">{{ item.status === 1?'禁用':'启用' }}</el-button>
					 	<el-button type="text" @click="edit(item.template_id)">编辑</el-button>
					 	<el-button type="text" @click="delTemplate(item.template_id)">删除</el-button>
					 </div>
				 </div>
				<el-table
				 :data="item.template_item"
				 :header-cell-style="{'border-top': '1px solid black'}"
				 stripe
				>
					<el-table-column label="地址类型" align="center" min-width="15%">
						<template slot-scope="scope">
							<p>{{ site_modes[scope.row.site_mode - 1] }}</p>
						</template>
					</el-table-column>
					<el-table-column label="计件条件" align="center" min-width="15%">
						<template slot-scope="scope">
							<p>{{ invoice_modes[scope.row.invoice_mode - 1] }}</p>
						</template>
					</el-table-column>
					<el-table-column label="判断条件" align="center" min-width="25%">
						<template slot-scope="scope">
							<p>
							<span v-if="scope.row.invoice_mode === 2 || scope.row.invoice_mode === 3">
							{{ judge_modes[scope.row.judge_number_mode - 1] + scope.row.number }}件
							</span>
							<span v-if="scope.row.invoice_mode === 3">
							且
							</span>
							<span v-if="scope.row.invoice_mode === 1 || scope.row.invoice_mode === 3">
							{{ judge_modes[scope.row.judge_mode - 1] + scope.row.money }} 元
							</span>
							</p>
						</template>
					</el-table-column>
					<el-table-column label="是否免运费" align="center" min-width="25%">
						<template slot-scope="scope">
							<p>{{ scope.row.is_free === 1? '免运费': '不免运费' }}</p>
						</template>
					</el-table-column>
					<el-table-column label="配送费" align="center" min-width="20%">
						<template slot-scope="scope">
							<p>{{ scope.row.template_fee }}/元</p>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<footer>
			<el-pagination
			  class="page-pagination"
			  background
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="params.page_num"
			  :page-sizes="[10, 20, 50, 100]"
			  :page-size="params.page_size"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="all_data_num">
			</el-pagination>
		</footer>	
	</el-card>
</template>

<script>
import { getTemplateList, setTemplateStatus, delTemplate } from '@/api/peisongfei'
import { pageMixin } from '@/components/PageMixin/index'
import { options } from './options'
	
export default {
	mixins: [ options, pageMixin ],
	data() {
		return {
			params:{
				page_num: 1,
				page_size: 10
			},
		}
	},
	methods:{
		getData(){
			this.tableLoading = true
			getTemplateList(this.params).then(res =>{
				
				this.tableData = res.data.list
				this.all_data_num = res.data.all_data_num
				
				setTimeout(()=>{
							this.tableLoading = false 
				},500)
			})
		},
		
		setTemplateStatus(template_id, status){
			setTemplateStatus({
				template_id, 
				status
			}).then(res =>{
				if(res.error_code === 200){
					this.$message.success(res.message)
				}
			})
		},
		
		delTemplate(template_id){
			delTemplate({
				template_id
			}).then(res =>{
				if(res.error_code === 200){
					this.$message.success(res.message)
					this.getData()
				}
			})
		},
		
		addpsf(){
			this.$router.push({path:'/example/addpsf', query: {
				method: 'create',
			}})
		},
		
		edit(template_id){
			this.$router.push({path:'/example/addpsf', query: {
				id: template_id,
				method: 'update',
			}})
		}
	}
}
</script>

<style scoped lang="scss">
	.page{
		margin: 10px
	}
	.contain{
		padding: 10px 50px;
		
		.info{
			background-color: #E4E7ED;
			height: 3rem;
			line-height: 3rem;
			text-align: center;
			color: #606266;
			
			div{
				display: inline-block;
			}
		}
	}
	footer{
		text-align: right;
		margin-top: 10px;
	}
</style>
